<template>
  <div class="page">
    <router-view></router-view>
    <g-alert></g-alert>
    <g-confirm></g-confirm>
    <g-toast></g-toast>
  </div>
</template>
<style src="../assets/css/ant-ui.reset.css"></style>
<style src="../assets/css/ant-ui.smooth.css"></style>
<style src="../assets/css/ant-ui.writing.css"></style>
<style src="../assets/css/ant-ui.buttongroup.css"></style>
<style src="../assets/css/ant-ui.tab.css"></style>
<style>
/* page */

.page {}

.icon-color {
  color: #B86086;
}


/* swiper */

.swiper-slide span {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  filter: progid: DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#80000000', endColorstr='#80000000')\9;
  display: block;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  font-family: "Microsoft YaHei";
}
</style>
<style src="../../node_modules/swiper/dist/css/swiper.css"></style>
<script>
import store from '../vuex/store'
import AlertComponent from '../components/alert'
import ConfirmComponent from '../components/confirm'
import ToastComponent from '../components/toast'
import { showLoadingToast, hideLoadingToast, loadCardsFromServer, loadWardsFromServer } from '../vuex/actions'
import $ from 'jquery'

export default {
  name: 'AppView',
  store,
  components: {
    'g-alert': AlertComponent,
    'g-confirm': ConfirmComponent,
    'g-toast': ToastComponent
  },
  data: function () {
    return {
      isAjaxWorking: false
    }
  },
  vuex: {
    actions: {
      showLoadingToast,
      hideLoadingToast,
      loadCardsFromServer,
      loadWardsFromServer
    }
  },
  created: function () {
    var self = this
    $(document).on('ajaxStart', function (e, xhr, options) {
      self.isAjaxWorking = true
      setTimeout(function () {
        if (self.isAjaxWorking) {
          self.showLoadingToast({}, false)
        }
      }, 800)
    })
    $(document).on('ajaxStop', function (e, xhr, options) {
      self.isAjaxWorking = false
      self.hideLoadingToast()
    })
  },
  ready: function () {
    this.loadCardsFromServer()
    this.loadWardsFromServer()
  }
}
</script>
